<template>
  <q-page>
    <div class="row q-pa-sm">
      <div class="column col q-pr-sm">
        <q-card flat>
          <q-item>
            <q-item-section>
              <div class="row items-center">
                <div>
                  <q-icon size="24px" color="purple-2" name="fa-solid fa-feather"></q-icon>
                </div>
                <div class="q-pl-sm text-bold">
                  标签大厅
                  <span class="q-pl-sm"> ( {{ pageParam.recordCount }} ) </span>
                </div>
              </div>
            </q-item-section>
            <q-item-section side>
              <div class="row">
                <q-input
                  v-model="pageParam.text"
                  type="text"
                  dense
                  label="标签名称"
                  :debounce="500"
                  @update:model-value="
                    () => {
                      f5()
                    }
                  "
                />
                <q-btn dense flat icon="refresh" @click="f5()">
                  <q-tooltip> 刷新 </q-tooltip>
                </q-btn>
              </div>
            </q-item-section>
          </q-item>

          <q-separator />

          <q-card-section>
            <div class="row">
              <div class="col-6" v-for="(item, index) in rows" :key="item.id">
                <q-card class="q-ma-sm">
                  <q-item
                    :to="{
                      path: '/tag/' + item.id,
                    }"
                    clickable
                    class="rounded-borders"
                  >
                    <q-item-section>
                      <q-item-label>{{ item.name }}</q-item-label>
                      <q-item-label caption lines="1">
                        最新文章: {{ item.newArtTitle }}
                      </q-item-label>
                    </q-item-section>

                    <q-item-section side top>
                      <q-item-label caption> 关注数: {{ item.followNum }} </q-item-label>
                      <q-item-label caption> 阅读量: {{ item.readNum }} </q-item-label>
                    </q-item-section>
                    <q-item-section side>
                      <q-btn
                        :color="item.followFlag ? 'positive' : 'info'"
                        flat
                        dense
                        :loading="btnLoad[index]"
                        :label="item.followFlag ? '取关' : '关注'"
                        @click.prevent="
                          async () => {
                            btnLoad[index] = true
                            const { data, error } = await globalFollowTag({
                              tagId: item.id,
                            })
                            btnLoad[index] = false
                            if (error) {
                              return
                            }
                            item.followFlag = data
                            item.followNum = item.followNum + (data ? 1 : -1)
                            Ok(data ? '关注成功' : '已取消关注')
                          }
                        "
                      />
                    </q-item-section>
                  </q-item>
                </q-card>
              </div>
            </div>
            <div class="row" v-if="loading">
              <div class="col-6" v-for="item in 2" :key="item">
                <q-card class="q-ma-sm">
                  <q-item clickable class="rounded-borders">
                    <q-item-section>
                      <q-item-label>
                        <q-skeleton type="text"> </q-skeleton>
                      </q-item-label>
                      <q-item-label caption lines="1">
                        <q-skeleton type="text"> </q-skeleton>
                      </q-item-label>
                    </q-item-section>
                    <q-item-section side top>
                      <q-item-label caption>
                        <q-skeleton type="text" class="w-40px"> </q-skeleton>
                      </q-item-label>
                      <q-item-label caption>
                        <q-skeleton type="text" class="w-40px"> </q-skeleton>
                      </q-item-label>
                    </q-item-section>
                  </q-item>
                </q-card>
              </div>
            </div>
          </q-card-section>
        </q-card>

        <div class="q-pt-sm full-width row flex-center" v-show="!loading && rows.length != 0">
          <q-btn
            flat
            color="primary"
            :loading="loading"
            @click="
              () => {
                pageParam.pageNum++
                load()
              }
            "
            :disable="pageParam.pageNum == pageParam.totalPage"
            :label="pageParam.pageNum == pageParam.totalPage ? '已加载全部' : '加载更多'"
          />
        </div>
        <q-space />
      </div>
      <div class="col-3">
        <div class="sticky" :style="'top: ' + webStore.topVal">
          <div><HotArticleCard></HotArticleCard></div>
          <div class="q-mt-sm"><HotTopicCard></HotTopicCard></div>
        </div>
      </div>
    </div>
    <SuspensionBtn></SuspensionBtn>
  </q-page>
</template>

<script setup lang="ts">
import HotArticleCard from 'src/components/HotArticleCard.vue'
import HotTopicCard from 'src/components/HotTopicCard.vue'
import SuspensionBtn from 'src/components/SuspensionBtn.vue'
import { onMounted, ref } from 'vue'
import type { ApiType } from 'src/service/api'
import { globalFollowTag, mainTagQryList } from 'src/service/api'
import useBoolean from 'src/use/useBoolean'
import { useWebStore } from 'src/stores/webStore'
import { useYuan } from 'src/use'

const webStore = useWebStore()
const { Ok } = useYuan()
type rowsType = ApiType<typeof mainTagQryList>['Return']['rows'][0]
const btnLoad = ref<Array<boolean>>([])
const rows = ref<Array<rowsType>>([])

const pageParam = ref({
  pageNum: 1,
  pageSize: 30,
  totalPage: 0,
  recordCount: 0,
  text: '',
})

const { bool: loading, setTrue: startLoad, setFalse: stopLoad } = useBoolean()

onMounted(() => {
  f5()
})

const f5 = async () => {
  pageParam.value.pageNum = 1
  rows.value = []
  startLoad()
  const { data, error } = await mainTagQryList(pageParam.value)
  stopLoad()
  if (!error) {
    pageParam.value.totalPage = data.totalPage
    pageParam.value.recordCount = data.recordCount
    rows.value = data.rows
  }
}

const load = async () => {
  startLoad()
  const { data, error } = await mainTagQryList(pageParam.value)
  stopLoad()
  if (!error) {
    pageParam.value.totalPage = data.totalPage
    pageParam.value.recordCount = data.recordCount
    rows.value.push(...data.rows)
  }
}
</script>

<style scoped></style>
